<template>
  <div class="mainContent">
    <div class="headerTitle">综合监督管理平台-粉尘涉爆企业监管</div>
    <!-- 项目选择切换 -->
    <div class="topProjectSelect">
      <div @click="goOthers('space')" class="top1"></div>
      <div @click="goOthers('dust')" class="top1 top2"></div>
      <div @click="goOthers('danger')" class="top1 top3"></div>
      <div @click="goOthers('')" class="top1 top4"></div>
      <div @click="goOthers('')" class="top1 bottom1"></div>
      <div @click="goOthers('')" class="top1 bottom1 bottom2"></div>
      <div @click="goOthers('factory')" class="top1 bottom1 bottom3"></div>
      <div @click="goOthers('')" class="top1 bottom1 bottom4"></div>
    </div>
    <!-- 左右侧边内容 -->
    <div class="content">
      <div class="commonStatic aside-left-show">
        <div class="innerTitle">
          <div class="descTitle">公共统计数据</div>
          <div class="detail">查看详情</div>
        </div>
        <div class="company"  @click="goDustThird">
          <div class="companyNum">{{ companysNumObj.companyAccess }}</div>
          <div class="companyNumR">
            +{{ publicNewDateMonthObj.companyAccessNew }}
          </div>
        </div>
        <div class="signal">
          <div class="signalNum">{{ companysNumObj.sceneInfo }}</div>
          <div class="signalNumR">
            +{{ publicNewDateMonthObj.sceneInfoNew }}
          </div>
        </div>
        <div class="equip">
          <div class="equipNum">{{ companysNumObj.deviceAccess }}</div>
          <div class="equipNumR">
            +{{ publicNewDateMonthObj.deviceAccessNew }}
          </div>
        </div>
        <div class="video">
          <div class="videoNum">{{ companysNumObj.videoAccess }}</div>
          <div class="videoNumR">
            +{{ publicNewDateMonthObj.videoAccessNew }}
          </div>
        </div>
      </div>
      <div class="leftBox aside-left-show">
        <div class="noClearCompany">
          <div class="allDescTitleL">未清理企业</div>
          <div class="allDescTitleR">查看详情</div>
          <div class="selectCondition">
            <div class="leftS" @click="chooseAllUC">总览</div>
            <div class="middle">
              <div class="selectTitle">
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ areaCodeValue }}<i class="el-icon-arrow-down"></i>
                </div>
                <div class="selectBox" v-if="areaCodeList.length > 0">
                  <div
                    class="selectItem"
                    v-for="item in areaCodeList"
                    :key="item.id"
                    @click="chooseArea(item.dictName, item.id)"
                  >
                    {{ item.dictName }}
                  </div>
                </div>
              </div>
            </div>
            <div class="rightS">
              <div class="selectTitle2">
                <div
                  style="
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                  "
                >
                  {{ industryCategoryValue }}<i class="el-icon-arrow-down"></i>
                </div>
                <div class="selectBox2" v-if="industryCategoryList.length > 0">
                  <div
                    class="selectItem2"
                    v-for="item in industryCategoryList"
                    :key="item.id"
                    @click="chooseIndustry(item.dictName, item.id)"
                  >
                    {{ item.dictName }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="lineBox">
            <div v-if="noClearCompanyList.cityList.length > 0">
              <div id="noClearCompanyLine" ref="noClearCompanyLine"></div>
            </div>
            <div
              v-else
              style="color: #fff; text-align: center; margin-top: 100px"
            >
              暂无数据
            </div>
          </div>
        </div>
        <div class="alarmWarning">
          <div class="allDescTitleL">传感器报警</div>
          <div class="videoDesc">视频报警</div>
          <div class="allDescTitleR">查看详情</div>
          <div class="alarmWarningC">
            <div
              @click="chooseAlarmDate('')"
              :class="['alarmDesc', { active: isVideoTrue === '' }]"
            >
              总览
            </div>
            <div
              @click="chooseAlarmDate('day')"
              :class="['alarmDesc', { active: isVideoTrue === 'day' }]"
            >
              今日
            </div>
            <div
              @click="chooseAlarmDate('week')"
              :class="['alarmDesc', { active: isVideoTrue === 'week' }]"
            >
              本周
            </div>
            <div
              @click="chooseAlarmDate('month')"
              :class="['alarmDesc', { active: isVideoTrue === 'month' }]"
            >
              本月
            </div>
          </div>
          <div v-if="sensorAlarmPieList.length > 0">
            <div id="alarmDescPie"></div>
          </div>
          <div
            v-else
            style="color: #fff; text-align: center; margin-top: 100px"
          >
            暂无数据
          </div>
        </div>
      </div>
      <div class="rightBox aside-right-show">
        <div class="jobSupervision">
          <div class="allDescTitleL">作业监督</div>
          <div class="allDescTitleR">查看详情</div>
          <div class="workBox">
            <div class="noClearBusiness">
              {{ workSuperviseData.unclearEnterprisesNum }}
            </div>
            <div class="noClearBusiness alarmTody">
              {{ workSuperviseData.alarmNum }}
            </div>
          </div>
        </div>
        <div class="videoAlarmBox">
          <div class="allDescTitleL">视频报警</div>
          <div class="allDescTitleD">查看详情</div>
          <div class="alarmWarningC">
            <div
              @click="chooseVideoA('')"
              :class="['alarmDesc', { active: isVideoAlarm === '' }]"
            >
              总览
            </div>
            <div
              @click="chooseVideoA('day')"
              :class="['alarmDesc', { active: isVideoAlarm === 'day' }]"
            >
              今日
            </div>
            <div
              @click="chooseVideoA('week')"
              :class="['alarmDesc', { active: isVideoAlarm === 'week' }]"
            >
              本周
            </div>
            <div
              @click="chooseVideoA('month')"
              :class="['alarmDesc', { active: isVideoAlarm === 'month' }]"
            >
              本月
            </div>
          </div>
          <div class="companyBox" v-show="companyVideoList.length > 0">
            <div
              class="companyList"
              v-for="(item, index) in companyVideoList"
              :key="index"
            >
              <div class="leftC">
                <div>{{ item.enterpriseName }}</div>
                <div>{{ item.startTime }}</div>
              </div>
              <div class="rightC" @click="chooseBaoJ(item)">
                <img class="rightImg" src="@/assets/dust/组 74@1x.png" alt="" />
              </div>
            </div>
          </div>
          <div class="companyBoxEmpty" v-show="companyVideoList.length <= 0">
            暂无数据
          </div>
        </div>
      </div>
    </div>

    <div class="areaSelect"></div>
    <div class="footerNav"></div>
  </div>
</template>

<script>
import {
  dict,
  unclearEnterprises,
  sensorAlarm,
  workSupervise,
  videoWarnInfo,
} from '@/api/dust'
import { companysNum, publicNewDateMonth } from '@/api/home'
export default {
  name: 'dustVue',
  props: {},
  components: {},
  data() {
    return {
      isVideoAlarm: '',
      companyVideoList: [],
      globalData: {
        companyNum: 0,
        monitoringScenariosNum: 0,
        equipNum: 0,
        videoNum: 0,
        companyNewNum: 0,
        scenariosNewNum: 0,
      },
      areaCodeList: [],
      areaCodeValue: '按区域查看',
      industryCategoryValue: '按行业查看',
      industryCategoryList: [],
      isVideoTrue: '',
      companyVideoItem: '',
      workSuperviseData: {
        unclearEnterprisesNum: 0,
        alarmNum: 0,
      },
      noClearCompanyList: {
        cityList: [],
        cityData: [],
        maxList: [],
        picNumList: [],
      },
      allNumList: ['1', '2', '3', '4', '5'],
      uploadLinePicList: [
        'http://60.188.49.69:8091/assets/lineLeft1.png',
        'http://60.188.49.69:8091/assets/lineLeft2.png',
        'http://60.188.49.69:8091/assets/lineLeft3.png',
        'http://60.188.49.69:8091/assets/lineLeft4.png',
        'http://60.188.49.69:8091/assets/lineLeft5.png',
      ],
      sensorAlarmPieList: [],
      companysNumObj: {
        companyAccess: '-',
        deviceAccess: '-',
        sceneInfo: '-',
        videoAccess: '-',
      },
      publicNewDateMonthObj: {
        videoAccessNew: '-',
        deviceAccessNew: '-',
        sceneInfoNew: '-',
        companyAccessNew: '-',
      },
    }
  },
  methods: {
    goOthers(path) {
      if (path !== this.$route.path.substring(1)) {
        this.$router.push(
          `/${path}`,
          () => {},
          () => {}
        )
      } else {
        this.$router.push('/home')
      }
    },

    createNoClearCompanyLine() {
      this.noClearCompanyList.picNumList = this.allNumList.slice(
        0,
        this.noClearCompanyList.maxList.length
      )
      let line1 = this.$echarts.getInstanceByDom(
        document.getElementById('noClearCompanyLine')
      )
      if (this.noClearCompanyList.maxList.length > 0 && line1 == undefined) {
        line1 = this.$echarts.init(
          document.getElementById('noClearCompanyLine')
        )
      }
      var top10CityData = this.noClearCompanyList.cityData
      var color = ['#DE0202', '#F3772A', '#F9BB5E', '#EFDF8C', '#FDF2BB']

      let lineY = []
      for (var i = 0; i < this.noClearCompanyList.cityList.length; i++) {
        var x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        var data = {
          name: this.noClearCompanyList.cityList[i],
          color: color[x] + ')',
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: color[x],
              barBorderRadius: 10,
            },
          },
        }
        lineY.push(data)
      }
      line1.setOption({
        title: {
          show: false,
        },
        tooltip: {
          trigger: 'item',
        },
        grid: {
          borderWidth: 0,
          top: '5%',
          left: '15%',
          right: '5%',
          bottom: '3%',
        },
        color: color,
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: this.noClearCompanyList.picNumList,
            axisLabel: {
              formatter: function (value) {
                return '{' + value + '|}'
              },
              margin: 10,
              padding: [0, 0, 20, 0],
              rich: {
                1: {
                  height: 25,
                  // align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[0],
                  },
                },
                2: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[1],
                  },
                },
                3: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[2],
                  },
                },
                4: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[3],
                  },
                },
                5: {
                  height: 25,
                  align: 'center',
                  backgroundColor: {
                    image: this.uploadLinePicList[4],
                  },
                },
              },
            },
          },
        ],
        xAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: '',
            type: 'bar',
            zlevel: 2,
            barWidth: '10px',
            data: lineY,
            animationDuration: 1000,
            label: {
              normal: {
                color: '#fff',
                show: true,
                position: [0, '-24px'],
                textStyle: {
                  fontSize: 16,
                },
                formatter: function (a) {
                  return a.name
                },
              },
            },
          },
          {
            name: '未清理企业',
            type: 'bar',
            barCategoryGap: '50%',
            barWidth: '10px',
            barGap: '-100%',
            margin: '20',
            data: this.noClearCompanyList.maxList,
            textStyle: {
              //图例文字的样式
              fontSize: 10,
              color: '#fff',
            },
            itemStyle: {
              normal: {
                color: '#103F3A',
                fontSize: 10,
                barBorderRadius: 30,
              },
            },
          },
        ],
        animationEasing: 'cubicOut',
      })
    },
    getAlarmDescPie() {
      let alarmDescPie = this.$echarts.getInstanceByDom(
        document.getElementById('alarmDescPie')
      )
      if (this.sensorAlarmPieList.length > 0 && alarmDescPie == undefined) {
        alarmDescPie = this.$echarts.init(
          document.getElementById('alarmDescPie')
        )
      }
      alarmDescPie.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: 'middle',
          left: '40%',
          height: 250,
          orient: 'vertical',
          itemWidth: 15,
          textStyle: {
            fontWeight: 400,
            fontSize: 12,
            color: '#fff',
          },
        },
        series: [
          {
            type: 'pie',
            center: ['20%', '50%'],
            radius: ['50%', '85%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center',
            },
            labelLine: {
              show: false,
            },
            data: this.sensorAlarmPieList,
          },
        ],
      })
    },
    async areaCode() {
      const res = await dict({ dictType: 'area_code' })
      this.areaCodeList = res.data
    },
    chooseArea(e) {
      this.areaCodeValue = e
      this.unclearEnterprises(
        this.areaCodeValue,
        this.industryCategoryValue === '按行业查看'
          ? ''
          : this.industryCategoryValue
      )
    },
    chooseIndustry(e) {
      this.industryCategoryValue = e
      this.unclearEnterprises(
        this.areaCodeValue === '按区域查看' ? this.areaCodeValue : '',
        this.industryCategoryValue
      )
    },
    async unclearEnterprises(areaCode, industryCategory) {
      const res = await unclearEnterprises({
        areaCode,
        industryCategory,
      })
      console.log(res)
      this.noClearCompanyList.cityList = res.data.map(
        (item) => item.enterpriseName
      )
      this.noClearCompanyList.cityData = res.data.map(
        (item) => item.clearRecordNum
      )
      let max = Math.max(this.noClearCompanyList.cityData)
      this.noClearCompanyList.maxList = this.noClearCompanyList.cityData.map(
        () => max
      )

      this.noClearCompanyList.picNumList = this.allNumList.slice(
        0,
        this.noClearCompanyList.maxList.length
      )
      if (this.noClearCompanyList.cityList.length > 0) {
        setTimeout(() => {
          this.createNoClearCompanyLine()
        }, 500)
      }
    },
    chooseAllUC() {
      this.unclearEnterprises()
      this.areaCodeValue = '按区域查看'
      this.industryCategoryValue = '按行业查看'
    },
    async industryCategory() {
      const res = await dict({ dictType: 'industry_category' })
      this.industryCategoryList = res.data
    },
    async sensorAlarm(params) {
      const res = await sensorAlarm({ date: params })
      const list = res.data.slice(0, 5)
      const newList = list.map((item) => {
        return {
          value: item.companyNum,
          name: item.enterpriseName,
          itemStyle: { color: '#FF9234' },
        }
      })
      const colorList = ['#FF9234', '#5DE1D4', '#3CB7A5', '#1D7B6D', '#134D46']
      newList.forEach((item, index) => {
        item.itemStyle.color = colorList[index]
      })
      this.sensorAlarmPieList = newList
      if (this.sensorAlarmPieList.length > 0) {
        setTimeout(() => {
          this.getAlarmDescPie()
        }, 500)
      }
    },
    async chooseAlarmDate(params) {
      this.isVideoTrue = params
      await this.sensorAlarm(params)
    },
    async workSupervise() {
      const res = await workSupervise()
      this.workSuperviseData = res.data
    },
    async videoWarnInfo(params) {
      const res = await videoWarnInfo({ date: params })
      this.companyVideoList = res.data
    },
    chooseVideoA(params) {
      this.isVideoAlarm = params
      this.videoWarnInfo(params)
    },
    async companysNum(type) {
      const res = await companysNum({ type })
      this.companysNumObj = res.data
    },
    async publicNewDateMonth(type) {
      const res = await publicNewDateMonth({ type })
      this.publicNewDateMonthObj = res.data
    },
    goDustThird() {
      this.$router.push('/dustThird')
    }
  },
  mounted() {},
  created() {
    this.companysNum('SC003')
    this.publicNewDateMonth('SC003')
    this.areaCode()
    this.unclearEnterprises()
    this.industryCategory()
    this.sensorAlarm('')
    this.workSupervise()
    this.videoWarnInfo()
  },
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.mainContent {
  width: 1920px;
  height: 1080px;
  position: relative;
  background-image: url('@/assets/common/WechatIMG2357.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}

.headerTitle {
  background-image: url('@/assets/common/HEAD@1x (1).png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  box-sizing: border-box;
  width: 1920px;
  height: 102px;
  text-align: center;
  padding-top: 9px;
  font-size: 40px;
  color: #fff;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}
.footerNav {
  background-image: url('@/assets/common/组 48054@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 1920px;
  height: 48px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.areaSelect {
  background-image: url('@/assets/common/Buttom_Nav@1x.png');
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  width: 684px;
  height: 30px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 52px;
}
.topProjectSelect {
  .top1 {
    width: 195px;
    height: 96px;
    position: absolute;
    top: 105px;
    left: 558px;
    background-image: url('@/assets/common/组 48064@1x.png');
    background-size: cover;
    background-repeat: no-repeat;
  }
  .top2 {
    left: 766px;
    background-image: url('@/assets/common/组 210@1x.png');
  }
 
  .top3 {
    left: 973px;
    background-image: url('@/assets/common/组 48066@1x.png');
  }
  .top4 {
    left: 1190px;
    background-image: url('@/assets/common/组 48067@1x.png');
  }
  .bottom1 {
    top: 232px;
    background-image: url('@/assets/common/组 48068@1x.png');
  }
  .bottom2 {
    left: 766px;
    background-image: url('@/assets/common/组 48069@1x.png');
  }
  .bottom3 {
    left: 973px;
    background-image: url('@/assets/common/组 48063@1x.png');
  }
  .bottom4 {
    left: 1190px;
    background-image: url('@/assets/common/组 48070@1x.png');
  }
}
.content {
  .commonStatic {
    background-image: url('@/assets/home/组 48059@1x.png');
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    left: 11px;
    top: 72px;
    width: 420px;
    height: 282px;
    .innerTitle {
      color: #fff;
      background-image: url('@/assets/home/组 48060@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 405px;
      box-sizing: border-box;
      height: 36px;
      font-size: 20px;
      font-weight: bold;
      position: relative;
      .descTitle {
        position: absolute;
        left: 15px;
        top: 7px;
      }
      .detail {
        color: #5de1d4;
        font-size: 12px;
        font-weight: bold;
        position: absolute;
        top: 5px;
        left: 327px;
        cursor: pointer;
      }
    }

    .company {
      background-image: url('@/assets/home/组 231@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 180px;
      height: 92px;
      position: absolute;
      left: 20px;
      top: 58px;
      cursor: pointer;
      .companyNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .companyNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .signal {
      background-image: url('@/assets/home/组 48062@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      width: 180px;
      height: 92px;
      position: absolute;
      left: 220px;
      top: 58px;
      .signalNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .signalNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .equip {
      background-image: url('@/assets/home/组 229@1x (1).png');
      background-size: cover;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-position: center;
      width: 180px;
      height: 93px;
      position: absolute;
      left: 20px;
      top: 166px;
      .equipNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .equipNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
    .video {
      background-image: url('@/assets/home/组 222@1x (1).png');
      background-size: cover;
      box-sizing: border-box;
      background-repeat: no-repeat;
      background-position: center;
      width: 180px;
      height: 93px;
      position: absolute;
      left: 220px;
      top: 166px;
      .videoNum {
        position: absolute;
        left: 74px;
        top: 15px;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
      }
      .videoNumR {
        position: absolute;
        top: 2px;
        right: 6px;
        color: #103f3a;
        font-size: 12px;
        font-weight: bold;
      }
    }
  }
  .allDescTitleL {
    position: absolute;
    left: 30px;
    top: 7px;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
  }
  .allDescTitleR {
    color: #5de1d4;
    font-size: 12px;
    position: absolute;
    right: 45px;
    top: 4px;
    cursor: pointer;
  }
  .leftBox {
    position: absolute;
    left: 10px;
    top: 364px;
    .videoDesc {
      color: #3cb7a5;
      font-size: 20px;
      position: absolute;
      left: 170px;
      top: 7px;
    }
    .firstDesc {
      width: 420px;
      height: 282px;
      background-image: url('@/assets/dust/LEFT_01@1x (2).png');
      position: relative;
      margin-bottom: 10px;
      img {
        width: 180px;
        height: 92px;
      }
      .zu185 {
        position: absolute;
        left: 20px;
        top: 58px;
        cursor: pointer;
      }
      .zu188 {
        position: absolute;
        left: 220px;
        top: 58px;
      }
      .zu186 {
        position: absolute;
        left: 20px;
        top: 166px;
        cursor: pointer;
      }
      .zu187 {
        position: absolute;
        left: 220px;
        top: 166px;
      }

      .accessFont {
        font-size: 28px;
        color: #fff;
        font-weight: 800;
      }
      .accessFontR {
        color: #103f3a;
        font-size: 12px;
      }
      .accessEnterprises {
        position: absolute;
        left: 94px;
        top: 73px;
        cursor: pointer;
      }
      .accessEnterprisesR {
        position: absolute;
        left: 170px;
        top: 58px;
      }
      .accessArea {
        position: absolute;
        left: 294px;
        top: 75px;
      }
      .accessAreaR {
        position: absolute;
        left: 365px;
        top: 58px;
      }
      .accessDevice {
        position: absolute;
        left: 94px;
        top: 178px;
        cursor: pointer;
      }
      .accessDeviceR {
        position: absolute;
        left: 170px;
        top: 165px;
        cursor: pointer;
      }
      .accessVideo {
        position: absolute;
        left: 294px;
        top: 176px;
      }
      .accessVideoR {
        position: absolute;
        left: 365px;
        top: 165px;
      }
    }
    .noClearCompany {
      width: 420px;
      height: 346px;
      background-image: url('@/assets/dust/LEFT_02@1x.png');
      position: relative;
      margin-bottom: 10px;
      .selectCondition {
        box-sizing: border-box;
        width: 420px;
        padding-top: 42px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;

        .leftS {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          background-color: #5de1d4;
          color: #022627;
          border-radius: 2px;
          cursor: pointer;
        }
        .middle {
          margin-left: 2px;
          .selectTitle {
            position: relative;
            box-sizing: border-box;
            width: 88px;
            height: 20px;
            line-height: 20px;
            background-color: #022627;
            border: 1px solid #5de1d4;
            color: #5de1d4;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            cursor: pointer;

            .selectBox {
              display: none;
              position: absolute;
              top: 20px;
              width: 88px;
              background-color: #022627;
              border: 1px solid #5de1d4;
              box-sizing: border-box;
              border-radius: 5px;
              z-index: 999;
            }
          }
          .selectItem {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
          .selectTitle:hover > .selectBox {
            display: block;
          }
          .selectItem:hover {
            color: #022627;
            background-color: #5de1d4;
          }
        }
        .rightS {
          margin-left: 2px;
          .selectTitle2 {
            position: relative;
            box-sizing: border-box;
            width: 88px;
            height: 20px;
            line-height: 20px;
            background-color: #022627;
            border: 1px solid #5de1d4;
            color: #5de1d4;
            text-align: center;
            line-height: 20px;
            border-radius: 2px;
            cursor: pointer;
            .selectBox2 {
              z-index: 999;
              display: none;
              position: absolute;
              top: 20px;
              width: 88px;
              background-color: #022627;
              border: 1px solid #5de1d4;
              box-sizing: border-box;
              border-radius: 5px;
            }
            .selectItem2 {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .selectItem2:hover {
              color: #022627;
              background-color: #5de1d4;
            }
          }
          .selectTitle2:hover > .selectBox2 {
            display: block;
          }
        }
      }
      .lineBox {
        width: 420px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        img {
          display: block;
          margin-bottom: 19px;
        }
        .lastImg {
          margin-bottom: 0;
        }
      }
      #noClearCompanyLine {
        width: 403px;
        height: 260px;
      }
    }
    .alarmWarning {
      width: 420px;
      height: 316px;
      background-image: url('@/assets/dust/组 48076@1x.png');
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      #alarmDescPie {
        margin-top: 30px;
        margin-left: 5px;
        width: 420px;
        height: 180px;
      }
      .alarmWarningC {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;

        .alarmDesc {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #59dace;
          border-radius: 2px;
          margin-left: 5px;
          background-color: #022627;
          border: 1px solid #59dace;
          cursor: pointer;
        }
        .active {
          background-color: #5de1d4;
          color: #022627;
        }
      }
    }
  }
  .rightBox {
    position: absolute;
    right: 10px;
    top: 72px;
    .jobSupervision {
      width: 420px;
      height: 360px;
      background-image: url('@/assets/dust/组 48077@1x.png');
      background-size: cover;
      background-repeat: no-repeat;
      position: relative;
      margin-bottom: 10px;
      .workBox {
        width: 420px;
        position: absolute;
        left: 0;
        top: 232px;
        font-size: 32px;
        font-weight: 800;
        color: #fff;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        box-sizing: border-box;
        padding-left: 20px;
      }
      .noClearBusiness {
        text-align: center;
        width: 100px;
      }
    }
    .videoAlarmBox {
      width: 420px;
      height: 594px;
      background-image: url('@/assets/dust/Right_020@1x.png');
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      box-sizing: border-box;
      // padding-top: 81px;
      .alarmWarningC {
        box-sizing: border-box;
        width: 420px;
        padding-top: 32px;
        display: flex;
        justify-content: right;
        align-items: center;
        padding-right: 15px;
        font-size: 12px;
        margin-bottom: 33px;
        .alarmDesc {
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          color: #59dace;
          border-radius: 2px;
          margin-left: 5px;
          background-color: #022627;
          border: 1px solid #59dace;
          cursor: pointer;
        }
        .active {
          background-color: #5de1d4;
          color: #022627;
        }
      }
      .allDescTitleD {
        position: absolute;
        left: 328px;
        top: 4px;
        color: #5de1d4;
        font-size: 12px;
        cursor: pointer;
      }
      .companyBox {
        padding-left: 30px;
        padding-right: 14px;
        .companyList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          margin-bottom: 19px;
          .rightC {
            .rightImg {
              width: 94px;
              height: 32px;
              cursor: pointer;
            }
          }
          .leftC {
            font-size: 14px;
            color: #fff;
          }
        }
      }
      .companyBoxEmpty {
        box-sizing: border-box;
        text-align: center;
        color: #fff;
      }
    }
  }
}
</style>
